<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css" />
    <link rel="stylesheet" href="./css/common.css" />
    <link rel="stylesheet" href="./css/swiper-bundle.min.css" />
    <link rel="stylesheet" href="./css/TV.css" />
    <script src="./js/swiper-bundle.min.js"></script>
  </head>
  <body>
    <script src="./js/rem.js"></script>
    <header>
      <ul class="nav"></ul>
    </header>

    <!--  -->
    <!-- 电影列表 -->
    <main>
      <div class="banner">
        <div class="swiper mySwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <img src="./images/TV/0.jpg" alt="" />
              <p>【二八定律·热播】杨幂洞房夸许凯：你数钱好帅</p>
            </div>
            <div class="swiper-slide">
              <img src="./images/TV/1.jpg" alt="" />
              <p>【我最爱的家人】虐心！女子为救恋人另嫁他人</p>
            </div>
          </div>
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <h4>网络剧集</h4>
      <ul class="list"></ul>
    </main>

    <!-- 底部导航 -->
    <footer>
      <a href="./index.html">
        <img src="./images/tabbar/2-1.png" alt="" />
        <p>首页</p>
      </a>
      <a href="./vip.html">
        <img src="./images/tabbar/4.png" alt="" />
        <p>vip</p>
      </a>
      <a href="./hotChat.html">
        <img src="./images/tabbar/1.png" alt="" />
        <p>热议</p>
      </a>
      <a href="./my.html">
        <img src="./images/tabbar/3.png" alt="" />
        <p>我的</p>
      </a>
    </footer>
    <a href="###" id="up">
      <i class="iconfont icon-arrow-up"></i>
    </a>
    <script>
      let up = document.getElementById('up')

      up.onclick = () => {
        window.scrollTo({
          top: 0,
          behavior: 'smooth',
        })
      }
      // 定义导航数据
      let navData = [
        {
          name: '直播',
          src: '###',
        },
        {
          name: '精选',
          src: './index.html',
        },
        {
          name: '发现',
          src: '###',
        },
        {
          name: '电视剧',
          src: './TV.html',
        },
        {
          name: '动漫',
          src: './animation.html',
        },
        {
          name: '电影',
          src: '###',
        },
        {
          name: '综艺',
          src: '###',
        },
        {
          name: '少儿',
          src: '###',
        },
      ]
      let navWrap = document.querySelector('.nav')
      // 渲染导航
      navData.forEach((item) => {
        // 创建li
        navWrap.innerHTML += `
      <li><a href="${item.src}">${item.name}</a></li>
  `
      })
      navWrap.scrollLeft = 160
      // 电影列表数据
      let movieList = [
        {
          img: './images/TV/10.jpg',
          name: '我们的当打之年.更新',
          info: ' 爽！谷峤反击郑宴熙造谣',
        },
        {
          img: './images/TV/11.jpg',
          name: '爱的二八定律.热播',
          info: ' 杨幂许凯反差姐弟恋',
        },
        {
          img: './images/TV/12.jpg',
          name: '虎胆潍城.更新',
          info: '首次全景展现镇海保卫战',
        },
        {
          img: './images/TV/13.jpg',
          name: '大博弈',
          info: ' 秦昊万茜玩转商界丛林法则',
        },
        {
          img: './images/TV/14.jpg',
          name: '山河锦绣·会员结局',
          info: ' 村民齐聚稻田庆丰年',
        },
        {
          img: './images/TV/15.jpg',
          name: '谁都知道我爱你',
          info: ' 宋茜许魏洲重逢再相爱',
        },
        {
          img: './images/TV/16.jpg',
          name: '长安秘闻录·短剧',
          info: '诡案频发！探秘奇闻异事',
        },
        {
          img: './images/TV/17.jpg',
          name: '乔家的儿女',
          info: '正午高分制作',
        },
      ]
      let movieWrap = document.querySelector('.list')
      movieList.forEach((item) => {
        movieWrap.innerHTML += `
              <li>
                <img src=${item.img} alt="" />
                <p>${item.name}</p>
                <span>${item.info}</span>
              </li>
              `
      })
      // 轮播图
      var swiper = new Swiper('.mySwiper', {
        spaceBetween: 30,
        centeredSlides: true,
        loop: true,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
        },
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
      })
    </script>
  </body>
</html>
